<template>
  <n-modal v-model:show="showModal" preset="card" :mask-closable="false" @afterLeave="clearParam" style="width: 600px">
    <n-form ref="formInstRef" :model="paramModel" :rules="rules" label-placement="left" label-width="auto">
      <slot/>
      <n-form-item>
        <n-button type="primary" round size="large" block @click="handleSubmit">
          <template #icon>
            <n-icon :component="CheckmarkOutline"/>
          </template>
          提交
        </n-button>
      </n-form-item>
    </n-form>
  </n-modal>
</template>

<script lang="ts" setup>
import {CheckmarkOutline} from "@vicons/ionicons5";
import {ref} from "vue";
import {FormInst} from "naive-ui";
import {CommonObject} from "../../model/Common";

const formInstRef = ref<FormInst | null>(null);

const props = defineProps<{
  showModal: boolean,
  paramModel: any,
  rules: CommonObject
}>();

const emits = defineEmits<{
  (e: "handleSubmit"): void,
  (e: "clearParam"): void
}>();

const handleSubmit = (): void => {
  formInstRef.value?.validate((errors) => {
        if (!errors) {
          emits("handleSubmit");
        }
      }
  )
}

const clearParam = (): void => {
  emits("clearParam");
}
</script>
